<template>
  <view>
    <!--搜索-->
    <view class="search-area">
      <search_field @click = "searchThing()"></search_field>
    </view>
    <!--顶部輪播圖区-->
    <swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true">
      <swiper-item v-for="(image,i) in swiperList" :key="i">
        <navigator class="swiper-item" :url="'/subpackage/product_detail/product_detail?product_id=' + image.id"> 
          <image :src= "resourseUrl + image.url"></image>//这里搞了好久，最后發現本地图片不能放到其他盤，一定要在static里，不过反正后面也是用的网址也沒多大事
  
        </navigator>
      </swiper-item>
    </swiper>
    <!--分类图片-->
    <view class="classify-list">
      <view class="type" v-for="(image,i) in typeList":key = "i" @click="typeClickSolve(image)">
        <navigator :url = "image.typeUrl">
          <image :src = "resourseUrl + image.url" class="type-img">
            <span class="type-text">{{image.name}}</span>
          </image>
        </navigator>
      </view>
    </view>
    <!--產品图片-->
    <view class="product-list">
      <!--左边-->
      <view class="left-image-box">
        <view class = "left-image-item" v-for="(product,i) in productList" :key = "i" v-if="i%2 ==0">
          <image :src="resourseUrl + product.img_url" style="width:350rpx"mode = "widthFix" @click="showDetail(product)">
            <span class = "left-product-name">{{product.productName}}</span>
            <span class = "left-product-price">{{product.price}}/{{product.unit}}</span>
          </image>
        </view>
      </view>
      <!--右边-->
      <view class = "right-image-box">
        <view class = "right-image-item" v-for="(product,i) in productList" :key = "i" v-if="i%2 == 1">
          <image :src="resourseUrl + product.img_url" style="width:350rpx" mode = "widthFix" @click="showDetail(product)">
            <span class = "right-product-name">{{product.productName}}</span>
            <span class = "right-product-price">{{product.price}}/{{product.unit}}</span>
          </image>
        </view>
        
      </view>
    </view>
    
  </view>
</template>

<script>
  import badgeMix from '@/store/tabbar-badge.js'
  import {mapState} from 'vuex'
  export default {
    mixins : [badgeMix],
    data() {
      return {
        //顶部輪播图數据列表，因為还沒做賣方端所以都是本地预先放的
        swiperList:[],
        //分类类型列表
        typeList:[],
        //產品列表
        productList:[],
        pagesize:10,
        alreadyGot:0,
        totalProducts:0,
        isloading:false
      };
    },
    onLoad(){
      this.getSwiperList()
      this.getTypeList()
      this.getProductList()
    },
    methods:{
      async getSwiperList(){
        //根路徑肯定是会变的，現在是本地LocalHost,未來可能会在云服務器，所以先在main.js里定义了
        const {data:res} = await uni.$http.get('swiper/1')
        
        if(res.meta.status !== 200){
          return uni.$showMessage()
        }
        this.swiperList = res.list//獲得后端傳來的整个輪播图路徑数组，后期会优化下整个逻輯和路徑
      },
      
      async getTypeList(){ //獲取分類的圖片地址
        const {data:res} = await uni.$http.get('classify/1')
        console.log(res)
        if(res.meta.status !== 200){
          return uni.$showMessage()
        }
        //循环给每个分类加上地址
        res.list.forEach(type=>{
          type.typeUrl = "/subpackage/classify_product/classify_product?type=" + type.name
          console.log(type.name)
        })
        
        this.typeList = res.list//獲得后端傳來的整个輪播图路徑数组，后期会优化下整个逻輯和路徑
      },
      
      typeClickSolve(data){
        console.log(data)
      },
      async getProductList(cb){
        this.isloading = true //开節流閥
        
        const {data: res} = await uni.$http.get('productList/'+ this.pagesize + '/' + this.alreadyGot)
        this.isloading = false//關節流閥
        cb && cb()
        if(res.meta.status !== 200)return uni.$showMessage()
        this.productList = [...this.productList,...res.list]
        this.totalProducts = res.total
        if(this.alreadyGot < this.totalProducts){
          this.alreadyGot += this.pagesize
        }else{
          this.alreadyGot = 0
        }
      },
      //搜索
      searchThing(){
        uni.navigateTo({
          url: '/subpackage/search/search'
        })
      },
      showDetail(product){
        uni.navigateTo({
          url: '/subpackage/product_detail/product_detail?product_id=' +product.product_id
        })
      }
    },
    onReachBottom(){
      if(this.isloading) return
      this.getProductList()
    },
    computed:{
      ...mapState('user',['resourseUrl']),
    }
  }
</script>

<style lang="scss">//样式擱这搞
swiper{
  height : 350rpx;
  .swiper-item,
  image {
    width: 100%;
    height: 100%;
  }
}
.classify-list{
  display: flex;
  justify-content: space-around;
  margin: 10px 0;
  
  .type-img{
    width: 120rpx;
    height: 120rpx;
  }
  .type-text{
    display: flex;
    flex-wrap:wrap;
    font-size: 8pt;
  }
}

.left-image-box{
    display: flex;
    flex-wrap: wrap;//可以並排显示
    justify-content: space-around;//分散对齐
    min-height: 300rpx;
    max-height: 300rpx;
    
    .left-product-name{
      display: flex;
      flex-wrap: wrap;
      font-size: 10pt;
      justify-content: flex-start;
    }
    .left-product-price{
      display: flex;
      flex-wrap: wrap;
      font-size: 10pt;
      color:#ff0000;
      justify-content: flex-end;
    }
  }
.right-image-box{
    display: flex;
    flex-wrap: wrap;//可以並排显示
    justify-content: space-around;//分散对齐
    min-height: 300rpx;
    max-height: 300rpx;
    .right-product-name{
      display: flex;
      flex-wrap: wrap;
      font-size: 10pt;
      justify-content: flex-start;
    }
    .right-product-price{
      display: flex;
      flex-wrap: wrap;
      font-size: 10pt;
      color:#ff0000;
      justify-content: flex-end;
    }
  }
.product-list{
  display: flex;//可以並排显示
  padding-left: 15rpx;//左边設間隙
}
.search-area{
  position: sticky;
  top:0;
  z-index: 9999;
}
</style>
